<template>
  <div id="container" :option="options"/>
</template>

<script>
import 'echarts-liquidfill'

function getColor (value) {
  return value > 0 && value <= 0.5 ? 'rgba(97,216,0,.7)'
    : value > 0.5 && value <= 0.8 ? 'rgba(29,81,212,0.7)'
    : value > 0.8 ? 'rgba(205,45,30,0.7)' : '#c7c7cb'
}
export default {
  mounted () {
    const data = [0.8]
    const chart = this.$echarts.init(document.getElementById('container'))
    chart.setOption({
      series: [{
        type: 'liquidFill',
        data,
        color: [getColor(data)],
        itemStyle: {
          opacity: 0.6,
          shadowBlur: 0,
          shadowColor: '#fff'
        },
        emphasis: {
          itemStyle: {
            opacity: 0.9
          }
        },
        label: {
          fontSize: 40,
          textStyle: {
            fontSize: 36,
            color: '#999',
            fontWeight: 'normal'
          }
        },
        radius: '80%',
        outline: {
          itemStyle: {
            borderColor: '#aaa4a4',
            borderWidth: 1,
            color: 'none',
            shadowBlur: 0,
            shadowColor: '#fff'
          },
          borderDistance: 0
        },
        backgroundStyle: {
          color: '#fff'
        },
        amplitude: 8
      }]
    })
  }
}
</script>

<style lang="scss" scoped>
#container {
  width: 100%;
  height: 100%;
}
</style>
